<template>
  <div class="whole-study">
    <div class="head-title">综合研判</div>
    <div class="search-time">
      <el-form ref="formRef" :inline="true" :model="filterForm">
        <el-form-item label="时间范围:" prop="times">
          <el-date-picker
            v-model="filterForm.times"
            type="daterange"
            :clearable="false"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            align="right">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="body-wrap">
      <div class="left-wrap">
        <div class="body-title">线索数据</div>
        <div class="echarts-wrap">
          <Echarts
            v-if="clueOptionsFlag"
            :options="clueOptions"
            :id="'one'"
            height="100%"
            width="100%"
          ></Echarts>
          <div class="no-content" v-else>
            <img :src="require('@/framework/assets/no-render.png')"/>
            <div class="content">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="right-wrap">
        <div class="body-title">调研线索</div>
        <div class="echarts-wrap">
          <Echarts
            v-if="surveyOptionsFlag"
            :options="surveyOptions"
            :id="'one'"
            height="100%"
            width="100%"
          ></Echarts>
          <div class="no-content" v-else>
            <img :src="require('@/framework/assets/no-render.png')"/>
            <div class="content">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <div class="body-wrap">
      <div class="left-wrap">
        <el-table
          ref="table"
          v-loading="MX_listLoading"
          :data="MX_list"
          border
          highlight-current-row
          :row-key="$_getRowKey"
          style="width: 100%;text-align:center"
          :header-cell-style="MX_headerCellStyle"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            align="center"
            :index="$_tableIndex"
          />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :formatter="item.formatter"
            align="center"
          />
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="MX_total > 0"
          layout="prev, pager, next"
          :total="MX_total"
          :page.sync="MX_pageNav.pageNo"
          :limit.sync="MX_pageNav.pageSize"
          @pagination="initListFn"
        />
      </div>
      <div class="right-wrap">
        <div class="body-title">项目状态</div>
        <div class="echarts-wrap">      
          <Echarts
            v-if="statusOptionsFlag"
            :options="statusOptions"
            :id="'one'"
            height="100%"
            width="100%"
          ></Echarts>
          <div class="no-content" v-else>
            <img :src="require('@/framework/assets/no-render.png')"/>
            <div class="content">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from './echarts.vue'
import studyApi from '@/api/investment/study'
import commonList from "@/utils/mixins/investment/commonList"

export default {
  name: 'wholeStudy',
  mixins: [commonList],
  components: {
    Echarts
  },
  data() {
    return {
      filterForm: {
        times: ''
      },
      clueOptionsFlag: false,
      surveyOptionsFlag: false,
      statusOptionsFlag: false,
      MX_pageNav: {
        pageNo: 1,
        pageSize: 7
      },
      // 线索数据
      clueOptions: {
        color: ['#1289FF', '#36CBCA', '#8EC21F', '#FFB700', '#3DCB8D'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 40,
          top: 'center',
          icon: 'circle'
        },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['40%', '50%'],
            radius: '60%',
            data: [],
            label: {
              formatter: '{b}\n{c}'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 调研数据
      surveyOptions:  {
        dataZoom: [],
        color: ['#1289FF', '#36CBCA'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          left: 10, 
          itemWidth: 12,
          itemHeight: 12
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            }
          }
        ],
        series: [
        
        ]
      },
      // 项目状态
      statusOptions: {
        dataZoom: [],
        color: ['#1289FF', '#36CBCA'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 10,
          left: 10, 
          itemWidth: 12,
          itemHeight: 12
        },
        grid: {
          left: '12%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',  // 将原先的 x 轴类型改为 value 类型
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'category',  // 将原先的 y 轴类型改为 category 类型
          data: [],  // 设置 y 轴的数据
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        series: [
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      columns: [
        { prop: 'name', label: `专班成员`, minWidth: '100px' },
        { prop: 'content', label: `项目个数`, minWidth: '200px' }
      ],
    }
  },
  mounted() {
    this.initTimes()
  },
  watch: {
    'filterForm.times'(newVal) {
      this.MX_pageNav.pageNo = 1
      this.renderPage()
    } 
  },
  methods: {
    formatTime(time) {
      let timer = new Date(time)

      const year = timer.getFullYear() + ''
      const month = timer.getMonth() + 1 + ''
      const day = timer.getDate() + ''

      return `${year.padStart(4, '0')}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
    },
    initTimes() {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      this.$set(this.filterForm, 'times', [start, end])
    },
    renderPage() {
      this.initClueOptionsFn()
      this.initSurveyOptionsFn()
      this.initStatusOptionsFn()
      this.initListFn()
    },
    async initClueOptionsFn() {
      const {data} = await studyApi.getClueDataPie({
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
      })
      if(data.length) {
        this.clueOptionsFlag = true
      } else {
        this.clueOptionsFlag = false
      }

      data.forEach(item => {
        item.value = item.content
      })

      this.$set(this.clueOptions.series[0], 'data', data)
    },
    async initSurveyOptionsFn() {
      const {data} = await studyApi.getClueResearch({
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
      })
      if(data.length) {
        this.surveyOptionsFlag = true
      } else {
        this.surveyOptionsFlag = false
      }

      let xAxis = data.map(item => item.name)
      let passData = data.map(item => item.auditPassCount)
      let failedData = data.map(item => item.auditFailedCount)

      this.$set(this.surveyOptions.xAxis, 0, {
        type: 'category',
        data: xAxis,
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      })

      let dataZoom = []
      if(xAxis.length > 6) {
        dataZoom =  [
          {
            type: 'slider',
            realtime: true,
            start: 0,
            height: 5, //组件高度
            left: '25%', //左边的距离
            right: '25%', //右边的距离
            bottom: '5%', //下边的距离
            show: true,  // 是否展示
            fillerColor: "#C1C1C1", // 滚动条颜色
            borderColor: "#E5E5E5",
            backgroundColor: '#E5E5E5',//两边未选中的滑动条区域的颜色
            handleSize: 0,      //两边手柄尺寸
            showDetail: false,  // 拖拽时是否展示滚动条两侧的文字
            zoomLock: true,         // 是否只平移不缩放
            moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
            startValue: 0, // 从头开始。
            endValue: 6,  // 最多5个
          },
          {
            type: "inside",  // 支持内部鼠标滚动平移
            start: 0,
            startValue: 0, // 从头开始。
            endValue: 6,  // 最多5个
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
          }
        ]
      } 
      this.$set(this.surveyOptions, 'dataZoom', dataZoom)

      this.$set(this.surveyOptions.series, 0, {
        name: '审核通过',
        type: 'bar',
        stack: 'Ad',
        barWidth: 44,
        label: {
          show: true
        },
        data: passData,
      })
      this.$set(this.surveyOptions.series, 1, {
        name: '待审核',
        type: 'bar',
        stack: 'Ad',
        label: {
          show: true
        },
        barWidth: 44,
        data: failedData
      })

    },
    async initStatusOptionsFn() {
      const {data} = await studyApi.getProjectStatus({
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
      })

      if(data.length) {
        this.statusOptionsFlag = true
      } else {
        this.statusOptionsFlag = false
      }

      let yAxis = data.map(item => item.name).reverse()
      let yangList = data.map(item => item.isYangCount).reverse()
      let noYangList = data.map(item => item.noYangCount).reverse()

      this.$set(this.statusOptions.yAxis, 'data', yAxis)

      let dataZoom = []
      let gridLeft = '3%'
      if(yAxis.length > 6) {
        dataZoom =  [
          {
            type: 'slider',
            orient: 'vertical',
            realtime: true,
            start: 100,
            width: 5,
            height: '50%', //组件高度
            top: '25%',
            bottom: '25%', //下边的距离
            left: '5%', //左边的距离
            show: true,  // 是否展示
            fillerColor: "#C1C1C1", // 滚动条颜色
            borderColor: "#E5E5E5",
            backgroundColor: '#E5E5E5',//两边未选中的滑动条区域的颜色
            handleSize: 0,      //两边手柄尺寸
            showDetail: false,  // 拖拽时是否展示滚动条两侧的文字
            zoomLock: true,         // 是否只平移不缩放
            moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
            startValue: 0, // 从头开始。
            endValue: 6,  // 最多5个
          },
          {
            type: "inside",  // 支持内部鼠标滚动平移
            start: 0,
            startValue: 0, // 从头开始。
            endValue: 6,  // 最多5个
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
          }
        ]
        gridLeft = '12%'
      } 
      this.$set(this.statusOptions, 'dataZoom', dataZoom)
      this.$set(this.statusOptions.grid, 'left', gridLeft)
      
      this.$set(this.statusOptions.series, 0, {
        name: '央企',
        type: 'bar',
        stack: 'Ad',
        label: {
          show: true
        },
        barWidth: 20,
        data: yangList,
      })
      this.$set(this.statusOptions.series, 1, {
        name: '非央企',
        type: 'bar',
        stack: 'Ad',
        label: {
          show: true
        },
        barWidth: 20,
        data: noYangList
      })
    },
    async initListFn() {
      this.$_getList(studyApi.getTableDataPage,{
        searchBeginTime: this.formatTime(this.filterForm.times[0]),
        searchEndTime: this.formatTime(this.filterForm.times[1]),
        ...this.MX_pageNav,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.whole-study {
  padding: 0 20px;
  .head-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .body-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    .left-wrap,
    .right-wrap {
      width: calc(50% - 7px);
      height: 400px;
    }
    .right-wrap {
      margin-left: 14px;
    }
    .body-title {
      font-size: 18px;
      font-weight: 600;
      padding: 8px;
    }
    .echarts-wrap {
      width: 100%;
      height: calc(100% - 40px);
    }
    .no-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #999;
      
      width: 100%;
      height: 100%;
      img {
        width: 210px;
        height: 105px;
      }
    }
  }
}
</style>
